<template>
	<view class="service_bottom">
		<view v-for="(item,index) in bottomOption" :key="index" class="option_item" @click="changOption(item)">
			<view class="option_content" :style="{color:currentOption == item.type ? '#1AA034':'#ccc'}">
				<li :class="['iconfont',item.icon]"></li>
				<text>{{item.name}}</text>
				<view v-if="index == 0 && getUnReadCount > 0" class="un_read">
					{{getUnReadCount}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			currentOption: {
				type: String,
				default: "online"
			}
		},
		computed: {
			getUnReadCount() {
				let currentContent = this.$store.state.conversitionList.filter(
					(x) => x.ReciverId == this.$store.state.sender.Id && !x.ReadFlag
				);
				return currentContent.length > 999 ? "999+" : currentContent.length;
			}
		},
		data() {
			return {
				bottomOption: [{
						name: "消息",
						type: "online",
						icon: "icon-huihua"
					},
					{
						name: "好友",
						type: "users",
						icon: "icon-haoyou"
					},
					{
						name: "发现",
						type: "community",
						icon: "icon-shequ"
					},
					{
						name: "我",
						type: "mine",
						icon: "icon-yonghu"
					},
				],
			}
		},
		methods: {
			changOption(item) {
				this.$emit("changeBottomSelect", item)
			},
		}
	}
</script>

<style scoped lang="scss">
	@import "@/static/css/icon.css";

	.service_bottom {
		height: 10vh;
		width: 100%;
		background-color: #292D32;
		box-shadow: 0rpx -1rpx 8rpx #292D32;
		position: fixed;
		bottom: 0;
		z-index: 10;
		display: flex;
		align-items: center;
		justify-content: center;

		.option_item {
			width: 33%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #7B7D83;
		}

		.option_content {
			width: 80%;
			text-align: center;
			position: relative;

			li {
				list-style: none;
			}

			.un_read {
				display: inline-block;
				position: absolute;
				top: 0px;
				right: 12px;
				height: 20px;
				width: 20px;
				border-radius: 50%;
				line-height: 10px;
				padding: 5px;
				text-align: center;
				background: #EE593C;
				color: #fff;
				font-size: 12px;
			}
		}

	}
</style>
